<template>
    <div>
        <div class="titleBox">
            <!-- icon-dingdan -->
            <div class="iconfontcolor icon-dingdan"></div>
            <div class="infoBox">
                <div class="info_line1">
                    <h3 class="tit">宏达车队</h3>
                </div>
                <div class="info_line2">
                    <div style="margin-right: 15px">开通时间：2023-05-24 10:15:15</div>
                </div>
            </div>
            <div class="feeGroup">
                <div class="feeBox">
                    <div class="intervalLine"></div>
                    <div class="feeItem">
                        <div class="tit">累计自营流水</div>
                        <div class="price">¥150.00</div>
                    </div>
                </div>
                <div class="feeBox">
                    <div class="intervalLine"></div>
                    <div class="feeItem">
                        <div class="tit">累计服务费用</div>
                        <div class="price">¥150.00</div>
                    </div>
                </div>

            </div>
            <button class="examineBtn">
                <i class="iconfont icon-tingzhi"></i>
                <span>停止服务</span>
            </button>
        </div>
        <div class="list">
            <titleVue :title="'自营服务费缴费记录'"></titleVue>
            <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left">

                <el-table-column align="left" prop="SerialNumber" width="80" label="序号">
                </el-table-column>
                <el-table-column align="left" prop="name" label="缴费状态">
                    <template slot-scope="scope">
                        <div class="tag">
                            <div class="dian"></div>
                            <div class="text">已逾期</div>
                        </div>
                        <div class="tag">
                            <div class="dian yellow"></div>
                            <div class="text">待缴费</div>
                        </div>
                        <div class="tag grey">
                            <div class="dian yellow"></div>
                            <div class="text">已缴费</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="abbreviation" label="缴费单号"></el-table-column>
                <el-table-column align="left" prop="location" label="月份">
                </el-table-column>
                <el-table-column align="left" prop="headName" label="自营流水（元）">
                </el-table-column>
                <el-table-column align="left" prop="headName" label="应缴服务费（元）">
                </el-table-column>
                <el-table-column align="left" prop="headName" label="实缴服务费（元）">
                </el-table-column>
                <el-table-column align="left" prop="headName" label="最晚缴费日期">
                </el-table-column>
                <el-table-column align="left" prop="headName" label="缴费时间">
                </el-table-column>

                <el-table-column align="left" prop="headTel" label="操作">
                </el-table-column>
                <!-- <el-table-column align="left" label="操作" width="153">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" size="small" @click="showPermissionDialog()">权限设置</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="paginationBox">
            <el-pagination @current-change="changePages($event)" class="pagination" background
                layout="slot,prev, pager, next" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
                <template slot>
                    <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
                </template>
            </el-pagination>
        </div>
    </div>
</template>

<script>
import titleVue from '@/components/titleVue.vue'
export default {
    data() {
        return {
            records:[],
            data:{},
      
        }
    },
    methods: {
        handleSelectionChange() {
            
        }
    },
  
    components:{
        titleVue,
    }
}
</script>

<style lang="scss" scoped>
.titleBox {
    flex: 1;
    background-color: #fff;
    height: 119px;
    display: flex;
    align-items: center;
    padding: 0 35px;
    margin-bottom: 9px;

    .feeGroup {
        margin-left: auto;
        display: flex;

        .feeBox {
            display: flex;
            width: 180px;
            align-items: center;
            justify-content: flex-end;


            .intervalLine {
                width: 2px;
                height: 64px;
                background-color: #f0f0f0;
                margin-right: 20px;
            }

            .feeItem {
                display: flex;
                flex-direction: column;
                margin-right: 20px;

                .tit {
                    color: #a3a3a3;
                    font-size: 12px;
                    margin-bottom: 14px;
                }

                .price {
                    color: #262626;
                    font-size: 18px;
                    font-weight: Bold;
                }
            }
        }
    }

    .icon-dingdan {
        font-size: 43px;
        margin-right: 10px;
    }

    .infoBox {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .info_line1 {
            margin-bottom: 3px;
            display: flex;
            align-items: center;

            >.tit {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                margin-right: 8px;
                color: #262626;
            }

            >.tag {
                background-color: #ecf5fe;
                border-radius: 4px;
                width: 54px;
                height: 20px;
                color: #1890ff;
                font-size: 10px;
                text-align: center;
                line-height: 20px;
            }
        }

        .info_line2 {
            display: flex;
            color: #939393;
            font-size: 12px;
        }
    }

    .examineBtn {
        background-color: #1890ff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: #ffffff;
        font-size: 12px;
        width: 102px;
        height: 36px;
        cursor: pointer;
        margin-left: 40px;

        &:hover {
            opacity: 0.8;
            transition: 0.2s;
        }

        .icon-tingzhi {
            font-size: 15px;
            margin-right: 6px;
            color: #ffffff;
        }
    }
}

.list {
    height: calc(100vh - 272px);
    background: #fff;
    margin-top:9px;
    padding: 36px 30px;


    ::v-deep .el-table__body-wrapper {
        max-height: calc(100vh - 414px) !important;
        overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
        background-color: #f0f6fd;
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        text-align: left;

        // 表 body的td
        ::v-deep .el-table__body td {
            color: #595959;
            font-size: 12px;
        }
    }

    .tag {
        width: 63px;
        height: 28px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #FDE8E9;
        color: #F5222D;
        &.gery{
            background-color: #F7F8F8;
            color:#A8B0B6;
            >.dian{
                background-color:#A8B0B6;
            }
        }
        &.yellow {
            background-color: #fffce8;
            color: #f9aa0d;
            >.dian{
                background-color:#F8B030;
            }
        }

  
        .dian {
          width: 4px;
          height: 4px;
          border-radius: 50%;
          margin-right: 4px;
          background-color: #F33D43;
        }
      }
}
.paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
        margin-left: auto;
    }
}


</style>